<template>
	<div id="app">
		<!-- 公共头部 -->
			<!-- <top-nav></top-nav> -->
			<router-view></router-view>
			<!-- 公共底部 -->
			<bottom-footer></bottom-footer>
			<!-- 报名按钮 -->
			<div class="baoming" @click="signUp()">
				<img src="http://files.wabei.cn/img/baoming-btn.png" alt="">
			</div>
	</div>
</template>

<script>
import topNav from './components/commenComp/topNav.vue'
import commenFooter from './components/commenComp/footers.vue'
	export default {
		name: 'App',
		components: {
			'top-nav': topNav,
			'bottom-footer':commenFooter
		},
		methods:{
			signUp(){
				this.$router.push({path: '/vote/signUp'})
			},
			toVote(companyId){
				alert("heh")
			}
		}
	}
</script>

<style>
*{
	box-sizing: border-box;
}
	body{
		font-size: 0.22rem;
	}
	#app {
		font-family: "PingFang SC","Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial", "Hiragino Sans GB",  "WenQuanYi Micro Hei", sans-serif !important;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
		font-size: 0.22rem;
	}
	
	img {
		content: normal !important;
	}
	.vux-header-title-area, .vux-header .vux-header-title{
		overflow: visible !important;
		margin:0 70px !important;
	}
	.vux-header .vux-header-right{
		top:24px !important;
	}
	div,p,span{
		box-sizing: border-box;
	}
	input,button{
		outline: none;
		border: none;
	}
	body,h1,h2,h3,h4,h5,h6,ul,li{
		margin: 0px;
		padding: 0px;
	}
	.hide{
		display: none;
	}
.fl{
	float:left;
}
.fr{
	float: right;
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}
.baoming{
	position: fixed;
	right:0px;
	bottom:10%;
}
.baoming img{
	width: 130px;
	height: 130px;
}
</style>
<style lang="scss">
.company-code{
	display: inline-block;
	max-width:300px;
	vertical-align: middle;
	overflow:hidden; /*超出的部分隐藏起来。*/ 
	white-space:nowrap;/*不显示的地方用省略号...代替*/
	text-overflow:ellipsis;/* 支持 IE */
}
.banner{
	width:100%;
	overflow: hidden;
}
.banner img{
	width:120%;
	margin-left:-10%;
}
	.prize-list>.prize-name{
		h2{
			font-size: 28px;
			font-weight: 700;
			text-align:left;
			padding-left: 32px;
			height: 68px;
			line-height:68px;
		}
		.prize-title{
			// height: 87px;
			// line-height:87px;
			padding:10px;
			justify-content: space-between;
			// vertical-align: middle;
			padding-left: 15px;
			display: flex;
			align-items: center;
			background-color: #f7f8f8;
			img{
				vertical-align: middle;
				width: 42px;
				height: 42px;
				&.hide{
					display: none;
				}
			}
			.name{
				font-size: 36px;
				color:#dbb37b;
				vertical-align: middle;
			}
			.tips{
				float: right;
				font-size: 26px;
				color: #c8c8c8;
				margin-right: 20px;
			}
		}
		.prize-detail{
			h4{
				height: 48px;
				line-height: 48px;
				text-align: center;
				font-size: 26px;
				color: #bbb;
				font-weight: 200;
				background-color: #F3F3F3;
				.join-number{
					color: #2992ff;
					margin-right: 40px;
				}
			}
			ul{
				margin:0px;
				padding:0px;
				li{
				margin:0px;
				padding-left:32px;
				vertical-align: middle;
				height: 90px;
				line-height: 90px;
				font-size: 26px;
				width: 100%;
				&.three{
					.number{
						font-size: 26px;
					}
				}
				&.four{
					.number{
						font-size: 26px;
					}
					
				}
				>div{
					border-bottom: 1px solid #F2F2F2;
				}
				&:nth-child(5n){
					border-bottom: 20px solid #F2F2F2;
					box-sizing: content-box;
					padding-left:0px;
					>div{
					border-bottom:none;
					margin-left:32px;
				}
				}
				.number{
					display: inline-block;
					width: 40px;
					height:40px;
					background-color: #b98d4e;
					text-align: center;
					line-height: 40px;
					color: #fff;
					border-radius: 6px;
					margin-right: 16px;
				}
				.current-votes{
					margin-left: 30px;
					color: #c8c8c8;
				}
				button{
					padding:0 10px;
					height: 50px;
					line-height: 50px;
					text-align: center;
					color: #fce2e0;
					font-size: 26px;
					background-color: #f43b3b;
					float: right;
					border-radius: 6px;
					margin-right: 30px;
					margin-top: 20px;
				}
			}
			}
			.load-more{
				font-size: 26px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				width: 100%;
			}
		}
		.shuoming{
			background-color: #f7f8f8;
			padding: 0px 15px 0px 60px;
			height: 68px;
			color: #cacaca;
		}
		
	}
	.weui-cells{
    background-color:#eee !important;
  }
.weui-cell{
    padding:0px;
    height: 70px;
    line-height:70px;
    margin-bottom:16px;
    border: none;
    border-radius: 8px;
    background-color: #fff;
    font-size:30px;
    color:#333;
    >div{
      border:none;
    }
  }
	.weui-cell.vux-x-textarea{
		height:200px;
		padding:0px;
		line-height:40px;
		color:#333;
		textarea{
			height:200px;
			width:100%;
		}
	}
  .weui-input::-webkit-input-placeholder,.weui-input,.vux-x-textarea::-webkit-textarea-placeholder{
     font-size:30px;
     color:#b5b5b6;
  }
  .weui-cells:before,.weui-cells:after{
    border:none !important;
  }
  button.weui-btn,.weui-btn_primary:not(.weui-btn_disabled):active{
      margin-top:60px;
      background-color: #2C91FF !important;
  }
 @media screen and (min-width: 1024px) {
  .weui-dialog {
    width: 80%;
  }
} 
.vux-x-dialog.dialog-demo{
    background-color: #fff;
    border-radius: 3px;
    bottom: 0;
    display: table;
    left: 0;
    margin: auto;
    max-width: 300px;
    overflow: hidden;
    right: 0;
    text-align: center;
    top: 0;
    width: 80%;
}
  .vux-rater-inner{
    width:56px !important;
    height:56px !important;
    font-size:60px;
  }
  .vux-rater-box{
    margin-right:28px !important;
  }
	.weui-mask{
		background: rgba(0,0,0,.6);
		bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0;
	}
	.weui-input{
		height: 46px !important;
		line-height: 46px !important;
		font-size:24px !important;
	}
</style>